<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>新增乘客</title>
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/swiper-3.2.7.min.css">
	<link rel="stylesheet" href="css/fakeLoader.css">
	<script src="js/zepto.js"></script>
	<script src="js/common.js"></script>
	<script src="js/jquery-2.1.4.min.js"></script>
	<script src="js/fakeLoader.min.js"></script>
</head>
<body>
	<div class="index newly">
		<div class="header-all">
			<div class="s-header">
				添加乘客
			</div>
			<div class="newly-add">
				<span>新增乘客信息</span>
				<a href="###"></a>
			</div>
		</div>
		<div class="newly-main">
			<ul>
				<li>
					<label for="">
						<input type="checkbox">
					</label>
					<div>
						<h2>吴帅哥</h2>
						<p>联系号码:<strong>18659189507</strong></p>
						<p>身份证号:<span>350583199201217411</span></p>
					</div>
				</li>
				<li>
					<label for="">
						<input type="checkbox">
					</label>
					<div>
						<h2>吴帅哥</h2>
						<p>联系号码:<strong>18659189507</strong></p>
						<p>身份证号:<span>350583199201217411</span></p>
					</div>
				</li>
			</ul>
			<div class="n-judge">
				<a href="###">确定</a>
				<a href="###">取消</a>
			</div>
		</div>
	</div>
	<div class="prompt-wrap n-prompt-wrap2">
		<div class="prompt-box">
			<p>
				姓名：
				<label for="">
					<input class="n-p-name" type="text" value="">
				</label>
			</p>
			<p>
				手机号：
				<label for="">
					<input class="n-p-phone" type="text" value="">
				</label>
			</p>
			<p>
				身份证：
				<label for="">
					<input class="n-p-id" type="text" value="">
				</label>
			</p>
			<div>
				<a class="n-no2" href="###">取消</a>
				<a class="n-yes2" href="###">确定</a>
			</div>
		</div>
	</div>
	<div class="fakeloader"></div>
	<script>
	$(document).ready(function(){
		// 新增取票人
		$('.newly-add').click(function() {
			$('.n-prompt-wrap2').fadeIn();
		});

			// 确认添加
		var nName = $('.n-p-name');
		var nPhone = $('.n-p-phone');
		var nId = $('.n-p-id');

		$('.n-yes2').click(function() {
			// $('.n-prompt-wrap2').fadeOut();
			if (nName.val() == '') {
				alert('请填写姓名！');
				return
			};
			if (nPhone.val() == '') {
				alert('请填写手机号！');
				return
			};
			if (nId.val() == '') {
				alert('请填写身份证！');
				return
			};
			if (nName.val() !== '' && nPhone.val() !== '' && nId.val() !== '') {
				alert('填写完整！');
				$('.n-prompt-wrap2').fadeOut();

				// 测试
				// 
				var addHtml = '<li><label for=""><input type="checkbox"></label><div><h2>' + nName.val() + '</h2><p>联系号码:<strong>' + nPhone.val() + '</strong></p><p>身份证号:<span>' + nId.val() + '</span></p></div></li>'
				$(".newly-main ul").append(addHtml);
				$('.n-prompt-wrap2 p input').val("");


				// ajax交互
				// $.ajax({
				// 	url:'/Index/postdata',
				// 	type:'POST',
				// 	dataType: "json",
				// 	data: 'nName.val()=' + nName.val() + '&nPhone.val()=' + nPhone.val() + '&nId.val()=' + nId.val(),
				// 		success: function(json){
				// 		if(json.ret==1){
				// 			// 成功则添加
				// 			// var addHtml = '<li><i><img src="images/icon_20.png"></i><div><h2>' + nName.val() + '</h2><p>联系号码:<strong>' + nPhone.val() + '</strong></p><p>身份证号:<span>' + nId.val() + '</span></p></div></li>'
				// 			// $(".newly-main ul").append(addHtml);
				// 			// $('.n-prompt-wrap2 p input').val("");
				// 		}else{  
				// 			// 失败提示
				// 			// alert('这里做刷新')
				// 		}
				// 	}
				// });
			};
		});

		// 取消清空并删除
		$('.n-no2').click(function() {
			$('.n-prompt-wrap2').fadeOut();
			$('.n-prompt-wrap2 p input').val("");
		});
	});
	</script>
</body>
</html>